<template>
  <div class="container">
    <el-card>
      <!-- 头部区域 -->
      <el-form :inline="true">
        <el-form-item label="学科名称:" class="input">
          <el-input size="small" v-model="queryeinfo.subjectName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="emptyinput"> 清除</el-button>
          <el-button size="small" type="primary" @click="gitList"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item class="button-right">
          <el-button type="success" icon="el-icon-edit" @click="addSubject"
            >新增学科</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 提示区域 -->
      <el-alert
        :title="'数据一共' + this.counts + '条'"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 表单区域 -->
      <template>
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="subjectName" label="学科名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="220px">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTime }}
            </template>
          </el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示">
            <template slot-scope="scope">
              <span v-if="scope.row.isFrontDisplay === 1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录">
          </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column label="操作" width="240px">
            <template slot-scope="scope">
              <el-button type="text" @click="routerhandle(scope.row)"
                >学科分类</el-button
              >
              <el-button type="text" @click="routerTags(scope.row)"
                >学科标签</el-button
              >
              <el-button type="text" @click="amendDialog(scope.row)"
                >修改</el-button
              >
              <el-button type="text" @click="deleteList(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 分页 -->

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryeinfo.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryeinfo.pagesize"
        layout=" prev, pager, next, sizes,jumper"
        :total="counts"
        class="button-right"
        background
      >
      </el-pagination>
    </el-card>

    <!-- 添加学科对话框 -->
    <el-dialog title="新增学科" :visible.sync="addDialogVisible" width="30%">
      <!-- 添加学科输入框 -->
      <el-form ref="formRef" :rules="rules" :model="form" label-width="90px">
        <el-form-item label="学科名称:" prop="subjectName">
          <el-input v-model="form.subjectName"></el-input>
        </el-form-item>
      </el-form>

      <!-- 标记部分 -->
      <span class="ssss">是否显示</span>
      <el-switch
        v-model="form.isFrontDisplay"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addList">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog title="修改学科" :visible.sync="amendDialogVisible" width="30%">
      <!--修改学科输入框 -->
      <el-form
        ref="amendRef"
        :rules="rules"
        :model="amendForm"
        label-width="90px"
      >
        <el-form-item label="学科名称:" prop="subjectName">
          <el-input v-model="amendForm.subjectName"></el-input>
        </el-form-item>
      </el-form>

      <!-- 标记部分 -->
      <span class="ssss">是否显示</span>
      <el-switch
        v-model="amendForm.isFrontDisplay"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
      <span slot="footer" class="dialog-footer">
        <el-button @click="amendDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="amendList">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, remove, update } from "@/api/hmmm/subjects.js";
export default {
  data() {
    return {
      // 表单数据
      list: [],
      // 返回的页码数据
      queryeinfo: {
        // 搜索框文本
        subjectName: "",
        // 默认页码
        page: 1,
        pagesize: 10
      },
      // 搜索框文本
      valueInput: "",
      // 总数据
      counts: 0,
      // 新增学科对话框显示与隐藏
      addDialogVisible: false,
      // 新增表单绑定数据
      form: {
        // 新增输入框的值
        subjectName: "",
        // 标记状态
        isFrontDisplay: true
      },
      // 修改对话框状态
      amendDialogVisible: false,
      // 表单验证
      rules: {
        subjectName: [
          { required: true, message: "请输入学科名称", trigger: "blur" }
        ]
      },
      // 修改的数据
      amendForm: {
        // 新增输入框的值
        subjectName: "",
        // 标记状态
        isFrontDisplay: true,
        id: 0
      }
    };
  },
  created() {
    this.gitList();
  },
  methods: {
    // 获取表单列表
    async gitList() {
      // console.log(val);
      try {
        const { data } = await list(this.queryeinfo);
        // console.log(data);
        //  给给列表赋值
        this.list = data.items;
        // 给总页数赋值
        this.counts = data.counts;
      } catch (error) {
        this.$message.error("获取列表失败");
      }
    },
    // 清除事件
    emptyinput() {
      this.queryeinfo.subjectName = "";
      this.gitList();
    },
    // 监听当前页面实现条数变化
    handleSizeChange(val) {
      this.queryeinfo.pagesize = val;
      this.gitList();
    },
    // 监听当前页码发生变化
    handleCurrentChange(val) {
      this.queryeinfo.page = val;
      this.gitList();
    },
    // 跳转到目录页面
    routerhandle(row) {
      this.$router.push(`directorys?id=${row.id}&name=${row.subjectName}`);
    },
    // 跳转到标签页面
    routerTags(row) {
      this.$router.push(`tags?id=${row.id}&name=${row.subjectName}`);
    },
    // 打开新增对话框事件
    addSubject() {
      this.addDialogVisible = true;
    },
    // 添加学科
    addList() {
      this.$refs.formRef.validate(async val => {
        if (!val) {
          return false;
        }
        // console.log(val);
        // console.log(this.form);
        if (this.form.isFrontDisplay === true) {
          this.form.isFrontDisplay = 1;
        } else {
          this.form.isFrontDisplay = 0;
        }
        // console.log(this.form);

        try {
          await add(this.form);
          this.$message.success("添加成功");
          this.gitList();
          this.form.subjectName = "";
          this.addDialogVisible = false;
        } catch (error) {
          this.$message.error("添加失败");
        }
      });
    },
    // 删除
    async deleteList(row) {
      const a = await this.$confirm("此操作将永久删除学科, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(err => err);
      if (a == "cancel") return this.$message.info("已取消删除");
      try {
        await remove(row);
        this.$message.success("删除成功");
        this.gitList();
      } catch (error) {
        this.$message.error("删除失败");
      }
    },
    // 修改对话框开关事件与赋值
    amendDialog(row) {
      // console.log(row);
      this.amendDialogVisible = true;
      this.amendForm.subjectName = row.subjectName;
      console.log(row);
      this.amendForm.id = row.id;
      if (row.isFrontDisplay == 1) {
        this.amendForm.isFrontDisplay = true;
      } else {
        this.amendForm.isFrontDisplay = false;
      }
    },
    // 修改对话框
    amendList() {
      this.$refs.amendRef.validate(async val => {
        if (!val) {
          return false;
        }
        if (this.amendForm.isFrontDisplay == true) {
          this.amendForm.isFrontDisplay = 1;
        } else {
          this.amendForm.isFrontDisplay = 0;
        }
        // console.log(this.id);
        //   console.log(this.amendForm);
        console.log(this.amendForm);

        try {
          const a = await update(this.amendForm);
          // console.log(a);
          this.$message.success("修改成功");
          this.gitList();
          this.amendDialogVisible = false;
        } catch (err) {
          this.$message.error("修改失败");
        }
      });
    }
  }
};
</script>

<style scoped>
/* 卡片样式 */
.el-card {
  margin: 20px;
}

.button-right {
  float: right;
}

/deep/.el-pagination__jump {
  margin-left: 0;
}
.button-right {
  float: right;
}
/deep/.el-dialog__footer {
  text-align: center;
}
.ssss {
  font-size: 14px;
  font-weight: 700;
  margin: 0 15px;
}
</style>
